<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 屏蔽tomcat 自带的 EL表达式 -->
<%@ page isELIgnored="false" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/bootstrap/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="${ctx}/static/bootstrap/bootstrap-table.css" media="all">
	<script type="text/javascript" src="${ctx}/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/ajax.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/form.js"></script>
	<script type="text/javascript" src="${ctx}/static/layer/layer.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/bootstrap.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/bootstrap-table.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/bootstrapdefault.js"></script>

</head>
<body style="padding-top: 8px;">

	<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
						<form role="form" id="searchform" class="form-horizontal">
								  <div class="form-group">
									    <label for="roleName" class="col-sm-1 control-label">角色名称</label>
									    <div class="col-sm-3"><input type="text" class="form-control" id="roleName" name="_LIKE_roleName"   autocomplete="off"></div>
									    <label for="roleDesc" class="col-sm-1 control-label">角色描述</label>
									    <div class="col-sm-3"><input type="text" class="form-control" id="roleDesc" name="_LIKE_roleDesc"   autocomplete="off"></div>
								  </div>
								 <div class="form-group">
									<div class="col-sm-offset-5 col-sm-6">
										<button id="btnsearch" type="button" class="btn  btn-green"><span class="glyphicon glyphicon-search"></span> 查询</button>
										<button id="btnreset" type="reset" class="btn  btn-red"><span class="glyphicon glyphicon-repeat"></span> 重置</button>
									</div>
								</div>
						</form>
						<div class="bootstrapTable" >
							<table id="table"></table>
						</div>
						<div id="toolbar" class="btn-toolbar" role="toolbar">
							 <div  class="btn-group" role="group" >
								  <button id="btnAdd" type="button" class="btn btn-green"> <span class="glyphicon glyphicon-plus"></span> 新建</button>
								  <button id="btnEdit" type="button" class="btn btn-blue"><span class="glyphicon glyphicon-edit"></span> 编辑</button>
								  <button id="btnDelete" type="button" class="btn btn-red"><span class="glyphicon glyphicon-Trash"></span> 删除</button>
							</div>
							 <div  class="btn-group" role="group" >
								  <button id="viewPerssion" type="button" class="btn btn-green"> <span class="glyphicon glyphicon-plus"></span> 查看角色</button>
								  <button id="addPerssion" type="button" class="btn btn-blue"><span class="glyphicon glyphicon-plus-sign"></span> 添加权限</button>
								 
							</div>
						</div>
						
						
				</div>
			</div>
	</div>

<script>

var boottable = {
		dheight : $(window).height()-135- $("#searchform").height()> 300 ? $(window).height()-135-$("#searchform").height(): 300 ,
		url : "${ctx}/role/roleInfo/query",
		onClickRow : onClickRow,
		columns: [ {
            field: 'roleCode',
            title: '角色编号',
            align: 'center',
              valign: 'middle',
            	width: '100px',
        }, {
            field: 'roleName',
            title: '角色名称',
        },{
            field: 'roleDesc',
            title: '角色描述',
        },{
            field: 'permissionString',
            title: '权限信息',
        }]
	}
	
		var roleTable = $('#table').bootstrapTable($.extend({}, bootstrapTableDefault, boottable));
		 //查询按钮
		$('#btnsearch').click(function(){
			roleTable.bootstrapTable('refreshOptions',{pageNumber : 1});  
			
		});
		$('#btnreset').click(function(){
			$('#searchform')[0].reset();
			roleTable.bootstrapTable('refreshOptions',{pageNumber : 1});  
		});
		 //新建按钮 btnEdit功能
		 $('#btnEdit').click(function(){
			 var data = getData();
				if(data == null){
					$.mask.alert("请选择要编辑的数据");
				}else{
					$.mask.open(data.roleName+"信息编辑", '${ctx}/role/roleInfo/edit', "initInfo",  $.extend({}, data, {"area":[ '50%', '60%' ]}));
				}
		});
		 
		 $('#btnAdd').click(function(){
			
			$.mask.open("角色添加", '${ctx}/role/roleInfo/edit', "initInfo",  $.extend({}, {"area":[ '50%', '60%' ]}));
				
		});
		 $('#addPerssion').click(function(){
			 var data = getData();
			 if(data == null){
				 $.mask.alert("请选择要添加权限的角色");
			 }else{
				 $.mask.open(data.roleName+"添加权限", '${ctx}/role/roleInfo/addPermission', "initInfo", $.extend({}, data, {"area":[ '50%', '90%' ]}));
			 }
			 
		});
		 
		 $('#viewPerssion').click(function(){
			 var data = getData();
			 if(data == null){
				 $.mask.alert("请选择要查看权限的角色");
			 }else{
				 $.mask.open(data.roleName+"查看权限", '${ctx}/role/roleInfo/addPermission', "initInfo", $.extend({}, data, {"area":[ '50%', '90%' ],"status":"view"}));
			 }
			 
		});
		 //获取当前行选中数据
		function getData(){
			 var index = $('#table').find('tr.success').data('index');
			 return $('#table').bootstrapTable('getData')[index];
		}
		function onClickRow(row, $element) {
			$('.success').removeClass('success');//去除之前选中的行的，选中样式
			$element.addClass('success');//添加当前选中的 success样式用于区别
			var data = getData();
			if(data.permissionString == ""){
				$("#btnDelete").attr("disabled",false);
			}else{
				$("#btnDelete").attr("disabled",true);
			}
			
		}
		        
		        
		   
</script>
</body>
</html>
